﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WMTS图层</title>
    <style>
        html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } 
    </style>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map, wmtsLayer;
        require([
          "esri/map", "esri/layers/WMTSLayer", "esri/layers/WMTSLayerInfo",
          "esri/geometry/Extent", "esri/layers/TileInfo", "esri/SpatialReference",
          "dojo/parser", "dojo/domReady!"
        ], function (
          Map, WMTSLayer, WMTSLayerInfo,
          Extent, TileInfo, SpatialReference,
          parser
        ) {
            parser.parse();

            var bounds = new Extent({
                "xmin": 115.5, "ymin": 39.5, "xmax": 117.5, "ymax": 41.0,
                "spatialReference": { "wkid": 4326 }
            });
            map = new Map("map", {
                extent: bounds
            });

            var tileInfo = new TileInfo({
                "dpi": 90.71428571428571,
                "format": "image/png",
                "compressionQuality": 0,
                "spatialReference": new SpatialReference({
                    "wkid": 4326
                }),
                "rows": 256,
                "cols": 256,
                "origin": {
                    "x": -180,
                    "y": 90
                },
                "lods": [
                    { "level": 0, "resolution": 1.40625, "scale": 590995197.14166909755553014475 },
                    { "level": 1, "resolution": 0.703125, "scale": 295497598.57083454877776507238 },
                    { "level": 2, "resolution": 0.3515625, "scale": 147748799.28541727438888253619 },
                    { "level": 3, "resolution": 0.17578125, "scale": 73874399.642708637194441268094 },
                    { "level": 4, "resolution": 0.087890625, "scale": 36937199.821354318597220634047 },
                    { "level": 5, "resolution": 0.0439453125, "scale": 18468599.910677159298610317023 },
                    { "level": 6, "resolution": 0.02197265625, "scale": 9234299.955338579649305158512 },
                    { "level": 7, "resolution": 0.010986328125, "scale": 4617149.9776692898246525792559 },
                    { "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9888346449123262896279 },
                    { "level": 9, "resolution": 0.00274658203125, "scale": 1154287.494417322456163144814 },
                    { "level": 10, "resolution": 0.001373291015625, "scale": 577143.74720866122808157240698 },
                    { "level": 11, "resolution": 0.0006866455078125, "scale": 288571.87360433061404078620349 },
                    { "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93680216530702039310175 },
                    { "level": 13, "resolution": 0.000171661376953125, "scale": 72142.968401082653510196550873 },
                    { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.484200541326755098275436 },
                    { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.742100270663377549137718 },
                    { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.871050135331688774568859 },
                    { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9355250676658443872844296 },
                    { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677625338329221936422148 },
                    { "level": 19, "resolution": 0.000002682209014892578125, "scale": 1127.2338812669164610968211074 },
                    { "level": 20, "resolution": 0.0000013411045074462890625, "scale": 563.61694063345823054841055369 }
                ]
            });
            var tileExtent = new Extent(-180.0, -90.0, 180.0, 90.0, new SpatialReference({
                wkid: 4326
            }));
            var layerInfo = new WMTSLayerInfo({
                tileInfo: tileInfo,
                fullExtent: tileExtent,
                initialExtent: tileExtent,
                identifier: "BJMAP",
                tileMatrixSet: "CustomCRS4326ScaleBJMap",
                format: "png",
                style: "default"
            });

            var resourceInfo = {
                version: "1.0.0",
                layerInfos: [layerInfo]
            };

            var options = {
                serviceMode: "KVP",
                resourceInfo: resourceInfo,
                layerInfo: layerInfo
            };

            wmtsLayer = new WMTSLayer("http://www.bjmap.gov.cn/services/ogc/wmts/12", options);
            map.addLayer(wmtsLayer);
        });
    </script>
  </head>  
  <body>
      <div id="map">        
      </div>
  </body>
</html>